<!-- views中的页面级组件，创建完成之后需要在路由router的配置中进行配置路由信息进行访问，我们的页面组件
  必须使用<router-view>显示在根组件之中-->
<template>
  <h1>关羽张飞-{{ counterStore.count }}</h1>
  <h2>{{ msg }}</h2>
  <button @click="clickBtn('Vue3')">获取数据</button>
  <button @click="add">加</button>
  <h1>{{ num }}</h1>
  <ul>
    <li v-for="(value,key,index) in obj">{{ key }}-{{ value }}-{{ index }}</li>
  </ul>
  <button @click="getData">获取reactive的数据</button>

  <button @click="goBack">返回</button>
</template>

<!-- setup其实就是一个属性，是一个标识（语法糖） -->
<!-- 告诉vue需要再编译时进行一些处理，比如return返回数据和函数方法，那么我们只用去编写业务就可以了 -->
<script lang="ts" setup>
//体现的响应式数据都是数据双向绑定的理念
import { ref,reactive } from 'vue'
// import {reactive} from 'vue'
import { useRouter } from 'vue-router';

import { useCounterStore } from '@/stores/counter';
const counterStore=useCounterStore()

const router=useRouter()//调用useRouter

console.log('state:',history.state.id);

//返回上一级
function goBack(){
  // router.back()
  router.go(-1)
}

//ref定义的是一个数据的响应式objRef.value.name/.id....
const msg=ref<string>('setup语法糖')
const num=ref<number>(0)
const objRef=ref({//要用value这一个数据取出来
  id:2,
  name:'刘备',
  sex:true
})

interface IPerson{
  id:number,
  name:string,
  sex:boolean,
  phone ?:string
}

//reactive定义的是多个数据的响应式obj.name/.id....
const obj =reactive<IPerson>({//可以直接取出来
  // <IPerson>数据类型用IPerson
  id:1,
  name:'张三',
  sex:true,
  // phone:10086
})

function getData(){
  console.log(obj.name);
  console.log(objRef.value.name);
}

function clickBtn(params:string){
  console.log(`${msg.value}-${params}`);
}
//返回 值 类型
function add():number{
 return num.value+=1
}

//匿名函数的写法

const test =function():string{
  return '匿名函数'
}

//箭头函数
const test2 =():number=>{
  return 100
}

</script>


<style lang="less">

</style>

<!-- vetur禁用重新加载 -->